<template>
	<div id="financial" class="ha">
		
		<div class="scroll_main o_h" :class="unTotal ? '' : 'hidePullup'">
			<scroll class="main"
				ref="scroll"
				:data="list"
				:top="0"
				:bottom="40"
				@onScroll="onScroll"
				@pullingUp="unTotal && onScrollBottom()"
				@pullingDown="onPullingDown"
				style="position: relative;"
			>
				<div class="cell dis_f pos_rel" v-for="(item,index) in list" @click="toDetail(item.id,item.carId)">
					<!-- <div class="serial pos_abs">{{index + 1}}</div> -->
					
					<!-- <img v-if="item.images.length !== 0" :src="baseURL + item.images[0]" alt="" /> -->
					<!-- <img v-else class="no_img" src="@/assets/images/nocar.png" alt="" /> -->

					<div class="user_img bb" :class="item.car.carNumber | name_color" style="margin-top: 0.3rem;">
						{{item.car.carNumber | madeImg }}
					</div>
					<div class="car_info_middle">
						<div class="car_name">{{item.car.carNumber || '--'}}</div>
						<div class="car_color">{{item.costTypeName || '--'}}</div>
						<div class="car_brand dis_f">
							<div class="" :class="{col_3:item.payChannel == '1',col_2:item.payChannel == '2',col_1:item.payChannel == '3'}">{{filterStatus(item.payChannel)}}</div>
							<div class="" style="margin-left: .1rem;">{{item.mustAmount}} 元</div>
						</div>
					</div>
					<!-- 单选 -->
					<div class="hook_box" @click.stop="checked(item.id,index,item.isChecked)" v-if="item.financeStatus == 2">
						<img class="hook" v-if="item.isChecked" src="@/assets/images/hook.png" alt="">
					</div>

					<div class="car_type pos_abs" :class="levelArr[item.financeStatus].color">
						{{levelArr[item.financeStatus].text}} / {{item.payIntoAmount == 0 ? '未入' : '已入'}}
					</div>
				</div>
				<div class="no_data wa" v-if="noData">
					<img src="@/assets/images/no_data.png" alt="">
					<div class="text wa tac">没有数据</div>
				</div>
				<div class="pullup_end" v-if="!unTotal && !noData">已经到头了</div>
			</scroll>
		</div>

		<div class="the_pay_btn" @click="getPayData(0)" v-show="isPayBtn">立即支付</div>

		<!-- 支付弹窗 -->
		<div class="qrcode_cover" v-show="isPay" @click="hideQrcode">
			<div class="qrcode_inner">
			<div
				class="qrcode"
				ref="qrcode"
				:class="payMethod === 0 ? 'weixin' : 'bao'"
			></div>
			<div class="pay_btns">
				<div class="pay_btn" @click="getPayData(0)">
					<img src="@/assets/images/wxpay.png" alt="" />
				</div>
				<!-- <div class="pay_btn" @click="getPayData(1)">
					<img src="@/assets/images/baopay.png" alt="" />
				</div> -->
			</div>
			</div>
		</div>
	</div>
</template>
<script>

import baseURL from '@/utils/url';
import Scroll from 'vue-scroll-m';
import QRCode from "qrcodejs2";
import { listFinanceDetail, payFinanceDetail, delFinanceDetail } from "@/api/financeDetail";
export default {
	name: 'topHead',
	components: { Scroll },
	data(){
		return {
			carId: null,
			finParams: {
				pageNum: 1,
				pageSize: 10,
			},
			list: [],
			images: [],
			baseURL: baseURL,
			listTotal: 0,
			unTotal: true,
			noData: false,

			isPayBtn: false,
			isPay: false,
			// 支付二维码地址
			qrcodeUrl: "",
			// 支付id
			payIds: [],

			// 非单个禁用
			single: true,
			levelArr:[
				{},
				{'text': '已收','color': 'work_bg'},
				{'text': '未收','color': 'coo_bg'},
				{'text': '已付','color': 'fix_bg'},
				{'text': '未付','color': 'finance_bg'}
			],
			isAllChecked:false,
			checkGroup:[],
			
			// 非多个禁用
			multiple: true,
			// 支付方法
			payMethod: 0,
			// 可支付数量
			canCheckLength: 0,
		}
	},
	created(){
		this.loading = this.$loading({
			lock: true,
			text: "加载中",
			background: "rgba(0, 0, 0, 0.7)",
		});
		this.getList();
	},
	methods: {
		filterStatus(val){
			if(val=="1"){
				return "线下"
			} else if (val == "2"){
				return "微信"
			}else{
				return "支付宝"
			}
		},
		getList() {
			listFinanceDetail(this.finParams).then( res => {
				let list = res.rows;
				let images = [];
				this.listTotal = res.total;
				if(res.total !== 0){
					list.forEach((item,index) => {
						if(item.car.carImg){
							images = item.car.carImg.split(",");
						}
						item.images = images || null;
						// if(item.financeStatus != 2 && item.payChannel != '1'){
						if(item.financeStatus == 2){
							// item.canPay = true;
							item.isChecked = false;
						}else{
							// item.canPay = false;
						}
						if(index === list.length - 1){
							if(this.finParams.pageNum !== 1){
								this.list = this.list.concat(list);
								if(this.list.length === this.listTotal){
									this.unTotal = false;
								}
							}else{
								this.list = list;
							}
							// 阻断下拉加载
							if(this.list.length < 10){
								this.unTotal = false;
							}
						}
					})
				}else{
					this.unTotal = false;
					this.noData = true;
				}
				this.loading.close();
			});
		},
		// 单选
		checked(id,index,isChecked){

			if(isChecked){
				this.payIds = this.payIds.filter((item) => { return item != id });
				this.list[index].isChecked = false;
			}else{
				this.payIds.push(id);
				this.list[index].isChecked = true;
			}
			if(this.payIds.length !== 0){
				this.isPayBtn = true;
			}else{
				this.isPayBtn = false;
			}
		},
		/** 线上收款 */
		handlePay() {
			this.getPayData(0);
		},
		async getPayData(type) {
			// type 用来区分 微信支付0 、 支付宝支付1
			this.payMethod = type;
			let id = this.payIds;
			await payFinanceDetail(id).then((res) => {
				this.isPay = true;
				// let arr = res.data.data.message;
				// var a = arr.indexOf("'https");
				// var b = arr.indexOf("';", a);
				// this.qrcodeUrl = arr.substring(a + 1, b - 1);
				this.qrcodeUrl = res.data;
				this.creatQrCode();
			}).catch(() => {

			});
		},
		creatQrCode() {
			// qrcode.clear(); // 清除二维码方法二
			this.$refs.qrcode.innerHTML = ""; //清除二维码方法一
			let text = this.qrcodeUrl;
			var qrcode = new QRCode(this.$refs.qrcode, {
				text: text, // 需要转换为二维码的内容
				width: 200,
				height: 200,
				colorDark: "#000000",
				colorLight: "#ffffff",
				correctLevel: QRCode.CorrectLevel.H,
			});
		},
		hideQrcode() {
			this.isPay = false;
		},

		// x修改
		handleAllChecked(){
			if(this.isAllChecked){
				this.checkGroup = this.list;
			}else{
				this.checkGroup = [];
			}
		},
		// 选中数量等于所有可选时显示全选
		// checked(event){
		// 	event.stopPropagation();
		// 	if(this.checkGroup.length === this.list.length){
		// 		this.isAllChecked = true
		// 	}else{
		// 		this.isAllChecked = false
		// 	}
		// },
		// 删除
		//  handleDelete(index,deleteid){
		// 	// filter过滤
		// 	this.checkGroup = this.checkGroup.filter(item=>item.id!==deleteid)
		// 	this.list.splice(index,1)
		// 	this.checked()
		// },
			// 删除
		// handleDelete(row) {
		// 	const ids = row.newId;
		// 	this.$modal.confirm('是否确认删除"' + row.costTypeName + '"的数据项？').then(() => {
		// 		this.form.costTableList.forEach((item, index) => {
		// 			if (item.newId === row.newId) {
		// 				this.form.costTableList.splice(index, 1);
		// 				this.$modal.msgSuccess("删除成功");
		// 				this.calculation();
		// 			}
		// 		})
		// 	}).catch(() => {
		// 	});
		// },
		/** 删除按钮操作 */
		
		toDetail(id,carId){
			this.$router.push("./financeDetail/" + id + '/' + carId);
		},

		// 下拉加载
		onScroll(e) {
			// console.log(e.target.scrollTop)
		},
		// 顶部下拉到头（刷新）
		onPullingDown() {
			this.list = [];
			this.finParams.pageNum = 1;
			this.unTotal = true;
			this.getList();
		},
		// 下拉松手 (加载)
		onScrollBottom(e) {
			if(this.list.length < this.listTotal ){
				this.finParams.pageNum++;
				this.getList();
			}
		},
		goTop() {
			this.$refs.scroll.scrollTo(0, 0);
		}
	},
	watch: {
		finParams(n,o){ //n为新值,o为旧值;
			// console.log(n,o)
			this.unTotal = true;
			this.noData = false;
			this.list = [];
			this.getList();
		}
	},
	filters: {
		madeImg(value){
			if(value !== null){
				return value.charAt(0);
			}
		},
		name_color(value){
			if(value !== null){
				if(isNaN(value[value.length - 1] )){
					let num = "bgc12";
					return num;
				}else{
					let num = "bgc" + value.charAt(value.length - 1) || 0;
					return num;
				}
			}
		}
	}
}
</script>
<style scoped lang="scss">
	@import '@/assets/css/currency.css';
	#financial{
		height: 100%;

		.scroll_main{
			height: calc( 100% - .4rem);
		}
		/deep/ .scroll-content{
			padding-bottom: 6rem;
		}
		.hidePullup /deep/ .pullup {
			display: none;
		}
	}
	.the_pay_btn{
		position: fixed;
		right: .3rem;
		bottom: 2rem;
		z-index: 9;
		background-color: #67C23A;
		color: #fff;
		text-align: center;
		line-height: 0.8rem;
		width: 2.5rem;
		border-radius: .2rem;
	}
</style>